<template>
  <div class="business-application-detail">
    <!-- 头部 -->
    <div class="header">
      <i class="fas fa-arrow-left" @click="goBack"></i>
      <h3>申请详情</h3>
      <div class="header-placeholder"></div>
    </div>

    <!-- 详情内容 -->
    <div class="content" v-if="application">
      <div class="detail-section">
        <!-- 基本信息 -->
        <div class="detail-group">
          <h4>基本信息</h4>
          <div class="detail-item">
            <label>店铺名称</label>
            <span>{{ application.businessName }}</span>
          </div>
          <div class="detail-item">
            <label>店铺地址</label>
            <span>{{ application.businessAddress }}</span>
          </div>
          <div class="detail-item">
            <label>联系信息</label>
            <span>{{ application.contactInfo }}</span>
          </div>
          <div class="detail-item">
            <label>申请状态</label>
            <span :class="['status', getStatusClass(application.status)]">
              {{ getStatusText(application.status) }}
            </span>
          </div>
        </div>

        <!-- 店铺信息 -->
        <div class="detail-group">
          <h4>店铺信息</h4>
          <div class="detail-item">
            <label>店铺描述</label>
            <span>{{ application.businessDescription }}</span>
          </div>
          <div class="detail-item">
            <label>订单类型</label>
            <span>{{ getOrderTypeText(application.orderTypeId) }}</span>
          </div>
          <div class="detail-item">
            <label>起送价</label>
            <span>¥{{ application.startPrice || '0.00' }}</span>
          </div>
          <div class="detail-item">
            <label>配送费</label>
            <span>¥{{ application.deliveryPrice || '0.00' }}</span>
          </div>
        </div>

        <!-- 审核信息 -->
        <div class="detail-group" v-if="application.status !== 0">
          <h4>审核信息</h4>
          <div class="detail-item" v-if="application.reviewComment">
            <label>审核意见</label>
            <span class="review-comment">{{ application.reviewComment }}</span>
          </div>
          <div class="detail-item" v-if="application.reviewerId">
            <label>审核人</label>
            <span>ID: {{ application.reviewerId }}</span>
          </div>
          <div class="detail-item" v-if="application.lastModifiedDate">
            <label>审核时间</label>
            <span>{{ formatDate(application.lastModifiedDate) }}</span>
          </div>
        </div>

        <!-- 申请时间 -->
        <div class="detail-group">
          <h4>申请信息</h4>
          <div class="detail-item">
            <label>申请时间</label>
            <span>{{ formatDate(application.createdDate) }}</span>
          </div>
        </div>
      </div>

      <!-- 操作按钮 -->
      <div class="action-buttons" v-if="application.status === 0">
        <button class="btn edit-btn" @click="editApplication">修改申请</button>
      </div>
    </div>

    <!-- 加载状态 -->
    <div class="loading" v-else>
      <i class="fas fa-spinner fa-spin"></i>
      <p>加载中...</p>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { applicationAPI } from '@/api/application.js'

const router = useRouter()
const route = useRoute()
const application = ref(null)
const loading = ref(false)

// 页面加载时获取申请详情
onMounted(async () => {
  await loadApplicationDetail()
})

// 加载申请详情
const loadApplicationDetail = async () => {
  loading.value = true
  try {
    const response = await applicationAPI.getApplicationById(route.params.id)
    console.log('完整响应:', response)

    // 简化数据处理逻辑
    let data = null

    // 根据实际响应结构调整
    if (response.data && response.data.success === true && response.data.data) {
      // 如果后端返回 { success: true, code: 'OK', data: {...}, message: null }
      data = response.data.data
    } else if (response.data && response.data.id) {
      // 如果后端直接返回申请对象
      data = response.data
    } else {
      // 其他情况
      data = response.data
    }

    console.log('提取的申请详情数据:', data)

    if (data) {
      application.value = data
      console.log('成功设置申请详情:', application.value)
    } else {
      console.error('未获取到申请详情数据')
      application.value = null
    }
  } catch (error) {
    console.error('获取申请详情失败:', error)
    alert('获取申请详情失败')
    application.value = null
  } finally {
    loading.value = false
  }
}

// 返回上一页
const goBack = () => {
  router.back()
}

// 编辑申请
const editApplication = () => {
  router.push(`/businessApplicationForm/${application.value.id}`)
}

// 获取状态文本
const getStatusText = (status) => {
  const statusMap = {
    0: '待审核',
    1: '审核通过',
    2: '审核不通过'
  }
  return statusMap[status] || '未知状态'
}

// 获取状态样式类
const getStatusClass = (status) => {
  const classMap = {
    0: 'pending',
    1: 'approved',
    2: 'rejected'
  }
  return classMap[status] || 'pending'
}

// 获取订单类型文本
const getOrderTypeText = (orderTypeId) => {
  const typeMap = {
    1: '外卖',
    2: '堂食',
    3: '外卖+堂食'
  }
  return typeMap[orderTypeId] || '未设置'
}

// 格式化日期
const formatDate = (dateString) => {
  if (!dateString) return ''
  const date = new Date(dateString)
  return date.toLocaleDateString('zh-CN') + ' ' + date.toLocaleTimeString('zh-CN', {hour: '2-digit', minute: '2-digit'})
}
</script>

<style scoped>
.business-application-detail {
  min-height: 100vh;
  background-color: #f5f5f5;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4vw;
  background: white;
  border-bottom: 1px solid #eee;
}

.header i {
  font-size: 5vw;
  color: #666;
  cursor: pointer;
}

.header h3 {
  font-size: 4.5vw;
  font-weight: normal;
  color: #333;
}

.header-placeholder {
  width: 5vw;
}

.content {
  padding: 4vw;
}

.detail-section {
  background: white;
  border-radius: 2vw;
  overflow: hidden;
}

.detail-group {
  padding: 4vw;
  border-bottom: 1px solid #f0f0f0;
}

.detail-group:last-child {
  border-bottom: none;
}

.detail-group h4 {
  font-size: 4.5vw;
  color: #333;
  margin-bottom: 3vw;
  padding-bottom: 2vw;
  border-bottom: 1px solid #f0f0f0;
}

.detail-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 3vw;
}

.detail-item:last-child {
  margin-bottom: 0;
}

.detail-item label {
  font-size: 4vw;
  color: #666;
  font-weight: 500;
  min-width: 25vw;
}

.detail-item span {
  font-size: 4vw;
  color: #333;
  text-align: right;
  flex: 1;
}

.status {
  padding: 1vw 2vw;
  border-radius: 1vw;
  font-size: 3.5vw;
  font-weight: bold;
}

.status.pending {
  background: #fff3cd;
  color: #856404;
}

.status.approved {
  background: #d4edda;
  color: #155724;
}

.status.rejected {
  background: #f8d7da;
  color: #721c24;
}

.review-comment {
  background: #f8f9fa;
  padding: 2vw;
  border-radius: 1vw;
  border-left: 3px solid #ee5a24;
}

.action-buttons {
  padding: 4vw;
  background: white;
  border-radius: 2vw;
  margin-top: 4vw;
}

.btn {
  width: 100%;
  padding: 4vw;
  border: none;
  border-radius: 2vw;
  font-size: 4.5vw;
  cursor: pointer;
}

.edit-btn {
  background: linear-gradient(135deg, #ff6b6b, #ee5a24);
  color: white;
}

.loading {
  text-align: center;
  padding: 20vw 4vw;
  color: #999;
}

.loading i {
  font-size: 8vw;
  margin-bottom: 4vw;
}

.loading p {
  font-size: 4.5vw;
}
</style>